<template>
  <el-dialog
    class="simple-dialog"
    title="用户信息"
    :visible.sync="tempVisible"
    width="500px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-form ref="formName" :rules="rules" :model="tempData" label-width="100px">
      <el-form-item label="用户名:" prop="username">
        <el-input v-model="tempData.username" placeholder="6-18位字符" :disabled="tempData.id&&null!==tempData.id" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="tempData.nickName" placeholder="32位字符" />
      </el-form-item>
      <el-form-item label="电话:" prop="phone">
        <el-input v-model="tempData.phone" placeholder="默认0，无限制" />
      </el-form-item>
      <el-form-item label="籍贯:" prop="origin">
        <el-input v-model="tempData.origin" placeholder="默认0，无限制" />
      </el-form-item>
      <el-form-item label="学校:" prop="school">
        <el-input v-model="tempData.school" placeholder="默认0，无限制" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="saveUpdate('formName')">
        <span v-if="this.tempData.id">确认修改</span>
        <span v-else>确认添加</span>
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import systemUserApi from '@/api/tenant/user'

export default {
  name: 'AddEdit',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dataFrom: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      tempVisible: false,
      roles: [],
      tempData: {
        id: null,
        name: null,
        appId: null,
        appSecret: null,
        qps: null,
        dayLimit: null,
        totalLimit: null
      },
      rules: {
        username: [
          { required: true, message: '用户名', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '昵称', trigger: 'blur' },
          { min: 6, max: 50, message: '长度在 6 到 50 个字符', trigger: 'blur' }
        ],
        phone: [
          { min: 11, max: 11, message: '长度11位', trigger: 'blur' }
        ],
        origin: [
          { min: 3, max: 50, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        school: [
           { min: 3, max: 50, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialogVisible: function(val) {
      this.tempVisible = val
    },
    dataFrom: function(val) {
      this.tempData = val
    }
  },
  mounted() {
  },
  methods: {
    close() {
      this.$refs['formName'].clearValidate()
      this.$emit('close')
    },
    saveUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //提交成功
          this.$message.success('提交成功');
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .add-edit {
    .el-dialog {
      .el-dialog__body {
        padding: 10px 20px 0 20px !important;
      }
    }
  }
</style>
